import { audioContext, playerStore } from '../../store/index'
const playModeNames = ['order', 'repeat', 'random']
Page({
	data: {
		id: 0,
		currentSong: {},
		lyricInfos: [],
		duration: 0,

		currentTime: 0,
		currentPage: 0,
		currentLyric: '',
		
		playModeIndex: 0,
		playModeName: 'order',
		isPlaying: false,
		playingName: 'pause',

		currentHeight: 0,
		sliderValue: 0,
		isSliderChanging: false,
		lyricScrollTop: 0
	},
	onLoad(options) {
		// 获取传入的id
		const id = options.id
		this.setData({ id })
		// 根据id 请求数据
		this.initPlayerStoreListener()

		// 获取屏幕高度设置轮播图高度
		const globalData = getApp().globalData
		const screenHeight = globalData.screenHeight
		const statusBarHeight = globalData.statusBarHeight
		// 一般不推荐直接写常量, 可以写在 app.js/常量文件
		const currentHeight = screenHeight - statusBarHeight - 44
		this.setData({ currentHeight })
	},
	// ===============================事件处理=======================
	// 完成一次拖动后触发的事件(点击)
	handleSliderChange(event) {
		const value = event.detail.value
		this.setData({ sliderValue: value })
		const currentTime = this.data.duration * (value / 100)
		audioContext.seek(currentTime / 1000)
		this.setData({ currentTime, isSliderChanging: false})
	},
	// 拖动过程中触发的事件
	handleSliderChanging(event){
		const value = event.detail.value
		const currentTime = this.data.duration * value / 100
		this.setData({ isSliderChanging: true, currentTime }) 
	},
	// 轮播图页面切换事件
	handleSwiperChange(event) {
		const currentPage = event.detail.current
		this.setData({ currentPage })
	},
	// 点击返回
	handleBackClick() {
		wx.navigateBack()
	},
	// 播放模式
	handleModeBtnClick() {
		let modeIndex = this.data.playModeIndex + 1
		if(modeIndex == 3) {
			modeIndex = 0
		}
		playerStore.setState('playModeIndex', modeIndex)
	},
	// 暂停/播放
	handlePlayBtnClick() {
		const isPllaying = this.data.isPlaying
		playerStore.dispatch('changeMusicPlayStatuAction', !isPllaying)
	},

	// 播放歌曲看播放模式
	// 上一首
	handlePrevClick() {
		playerStore.dispatch('changeNewMusicAction', false)
	},
	// 下一首
	handleNextClick() {
		playerStore.dispatch('changeNewMusicAction')
	},

	// player-store进行数据的监听
	initPlayerStoreListener() {
		playerStore.onStates(['currentSong', 'duration', 'lyricInfos'], 
		({currentSong, duration, lyricInfos}) => {
			if(currentSong) this.setData({ currentSong })
			if(duration) this.setData({ duration })
			if(lyricInfos) this.setData({ lyricInfos })
		})

		playerStore.onStates(['currentTime', 'currentLyric', 'lyricScrollTop'], 
		({ currentTime, currentLyric, lyricScrollTop }) => {
			if(currentTime && !this.data.isSliderChanging) {
				const sliderValue = currentTime / this.data.duration * 100
				this.setData({currentTime, sliderValue})
			}
			if(currentLyric) this.setData({currentLyric})
			if(lyricScrollTop) this.setData({lyricScrollTop})
		})

		playerStore.onStates(['playModeIndex', 'isPlaying'], ({ playModeIndex, isPlaying }) => {
			if(playModeIndex !== undefined) {
				this.setData({ playModeIndex, playModeName: playModeNames[playModeIndex] })
			}
			if(isPlaying !== undefined) {
				this.setData({ isPlaying, playingName: isPlaying? 'pause' : 'resume' })
			}
		})
	}
})